<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 定损归还用品 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-input v-model="query.sid" placeholder="学号" class="handle-input mr10"></el-input>
                <el-input v-model="query.studentName" placeholder="姓名" class="handle-input mr10"></el-input> -->
                <!-- <el-input v-model="query.title" placeholder="物品名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> -->
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                :default-sort = "{prop: 'cname', order: 'descending'}"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center" ></el-table-column>
                <!-- <el-table-column align="center" label="序号" type="index" width="180"></el-table-column> -->
                <el-table-column type="index" label="编号" width="55" align="center" ></el-table-column>
                <el-table-column prop="title" label="用品名" ></el-table-column>
                
                <el-table-column prop="addres" label="地址" ></el-table-column>
                <el-table-column prop="phone" label="电话" ></el-table-column>


                <!-- <el-table-column v-if="tableData[scope.$index].id>0"  label="原图片">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src='getimg(scope.row.imgurl1)' alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src=getimg(scope.row.imgurl1) style="width: 30px;height: 30px">
            </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column  prop="imgurl1"  label="原图片">

        <template  slot-scope="scope">
            <el-popover v-if="tableData[scope.$index].id>0" placement="top-start" title="" trigger="hover">
              <img :src='getimg(scope.row.imgurl1)' alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src=getimg(scope.row.imgurl1) style="width: 30px;height: 30px">
            </el-popover>
            <el-popover v-else placement="top-start" title="" trigger="hover">
              <img :src="tableData[scope.$index].imgurl1" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="tableData[scope.$index].imgurl1" style="width: 30px;height: 30px">
            </el-popover>
        </template>

       
          
      </el-table-column>

      


      <el-table-column  label="定损图片">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src='getimg(scope.row.imgurl2)' alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src=getimg(scope.row.imgurl2) style="width: 30px;height: 30px">
            </el-popover>
        </template>
      </el-table-column>
      <el-table-column  label="定损图片">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src='getimg(scope.row.imgurl2)' alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src=getimg(scope.row.imgurl2) style="width: 30px;height: 30px">
            </el-popover>
        </template>
      </el-table-column>


                <el-table-column prop="leixin1" label="类型1" ></el-table-column>
                <el-table-column prop="overtime" label="到期时间" ></el-table-column>
                <el-table-column prop="yuqitime" label="归还时间" ></el-table-column>
                <el-table-column prop="deposit" label="押金" ></el-table-column>
                <el-table-column prop="feiyong" label="租赁费用" ></el-table-column>
                <el-table-column prop="yuqifeiyong" label="逾期费用" ></el-table-column>

                <el-table-column label="总费用">
                <template slot-scope="scope">
            
                <p>{{ scope.row.deposit+scope.row.feiyong+scope.row.yuqifeiyong}}</p>
            
        </template>
    </el-table-column>
                <!-- <el-table-column prop="feiyong2" label="总费用" >{{ feiyong }}+{{ feiyong3 }}</el-table-column> -->
                <el-table-column prop="ordernumber1" label="是否归还" ></el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="操作" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="编号">
                    <el-input v-model="form.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用品名">
                    <el-input v-model="form.title" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.addres" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="选择图片">
                    <input type="file" name="" id="" accept="image/jpeg,image/jpg,image/png" @change="changeImage" />
                    <img :src="url" width="200" height="200">
                </el-form-item>
                <el-form-item label="是否归还">
                    <el-input v-model="form.ordernumber1"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <!-- <el-button type="primary" @click="saveEdit">删除</el-button> -->
                <el-button type="primary" @click="saveEdit">修改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetch_grade1, update_grade ,add_student} from '../../api/index';
import Axios from 'axios';
export default {
    name: 'basetable',
    data() {
        return {
            url:[],
            i:1,
            query: {
                sid: '',
                title: '',
                currentPage: 0,
                pageSize: 15
            },
            options_class: [
                {
                    value: '1',
                    label: '1'
                },
                {
                    value: '2',
                    label: '2'
                },
                {
                    value: '3',
                    label: '3'
                }
            ],
            options_major: [
                {
                    value: '计算机科学与技术',
                    label: '计算机科学与技术'
                },
                {
                    value: '数字媒体',
                    label: '数字媒体'
                }
            ],
            value_class: '',
            value_major: '',
            tableData: [{
                id: 1,
                title: "1汉服女短袖连衣裙",
                addres: "九江学院",
                phone: "1008611",
                imgurl1: "/tupian/后台/儿童用品img/1/1.webp",
                imgurl2: "/tupian/后台/儿童用品img/1/1-1.webp",
                imgurl3: "/tupian/后台/儿童用品img/1/1-2.webp",
                leixin1: "女短袖连衣裙",
                overtime: "2023-02-01",
                yuqitime: "2023-02-02",
                deposit:120,
                feiyong:20,
                feiyong1:0,
                feiyong2:0,
                num: "未归还",
            },
            {
                id: 2,
                title: "男孩汉服",
                addres: "九江学院",
                phone: "1008611",
                imgurl1: "/tupian/后台/儿童用品img/2/2.webp",
                imgurl2: "/tupian/后台/儿童用品img/2/2-1.webp",
                imgurl3: "/tupian/后台/儿童用品img/2/2-2.webp",
                leixin1: "皇帝类汉服",
                overtime: "2023-03-02",
                yuqitime: "2023-03-04",
                deposit:120,
                feiyong:20,
                feiyong1:0,
                feiyong2:0,
                num: "未归还",
            },
            {
                id: 3,
                title: "儿童篮球",
                addres: "九江学院",
                phone: "1008611",
                imgurl1: "/tupian/后台/儿童用品img/5/1.webp",
                imgurl2: "/tupian/后台/儿童用品img/5/1-1.webp",
                imgurl3: "/tupian/后台/儿童用品img/5/1-2.webp",
                leixin1: "黄色",
                overtime: "2023-03-12",
                yuqitime: "2023-03-14",
                deposit:120,
                feiyong:20,
                feiyong1:0,
                feiyong2:0,
                num: "未归还",
            },
              
        ],
            totalData:[],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            addVisible: false,
            pageTotal: 3,
            form: {},
            form_add:{},
            origin: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetch_grade1(this.query).then(res => {
                // console.log(res);
                this.tableData = res.data.data;
                console.log(this.tableData);
                this.pageTotal = res.data.data.length|| 5;
            });

        },
        changeImage(e){
            console.log(e)
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      console.log(reader)
      reader.onload = function(e) {
        
        that.url = this.result;
        
      };
     
      
	},

 

        getimg(img){
            var filename;  
            img="../../assets"+img
            // console.log(img)
            var str_url = img
            var lst_url = str_url.split('/')
            // lst_url.pop(-2)
            // str_url = '/'.join(lst_url)
            // console.log(lst_url[6])
            var a=img.indexOf("/")
            // console.log(a)
            if(img.indexOf("/")>0){//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
	        filename=img.substring(img.lastIndexOf("/")+1,img.length);
             }else{
	             filename=img;
             }
            // console.log(filename)
            // console.log(img)
            var imgurl
            imgurl=require('../../assets/tupian/后台/儿童用品img/'+lst_url[6]+'/'+filename)
            // console.log(imgurl)
            return imgurl
        },
        // 触发搜索按钮
        handleSearch() {
            console.log(this.query)
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },

        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.origin['sid'] = row['sid'];
            this.origin['studentName'] = row['studentName'];
            this.origin['cname'] = row['cname'];
            this.origin['teacherName'] = row['teacherName'];
            this.origin['ordernumber1'] = row['ordernumber1'];
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {


            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);

            this.$set(this.tableData[this.idx+1], this.idx, this.form);

            console.log(this.idx+1)
            this.$set(this.tableData[this.idx], 'imgurl1', this.url);

            this.$set(this.tableData[this.idx], 'id', 0);

            
            // this.$set(this.tableData, imgurl1, this.url);
            
            console.log(this.tableData[this.idx])
            data['ordernumber1'] = this.form['ordernumber1']
            console.log(this.origin['grade'])
            data['pageIndex'] = this.query.pageIndex
            data['pageSize'] = this.query.pageSize
            console.log(data)
        
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val)
            this.$set(this.query, 'currentPage', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
